<template>
  <main>
    <h2 class="text-gray-50 text-center text-sm opacity-70">参数设置</h2>
    <el-select
      v-model="currDeviceId"
      clearable
      placeholder="请选择摄像头设备"
      size="large"
      style="width: 240px"
    >
      <el-option
        v-for="item in videoInputList"
        :key="item.deviceId"
        :label="item.label"
        :value="item.deviceId"
      />
    </el-select>
  </main>
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'

const emits = defineEmits({
  updateCurrentDeviceId: (deviceId?: string | null) => deviceId
})

const currDeviceId = ref<string | null>(null)

const videoInputList = ref<MediaDeviceInfo[]>([])

watch(
  () => currDeviceId.value,
  () => {
    emits('updateCurrentDeviceId', currDeviceId?.value)
  }
)

onMounted(() => {
  ;(async () => {
    const devices = await navigator.mediaDevices.enumerateDevices()
    videoInputList.value = devices.filter((device) => device.kind === 'videoinput')
  })()
})
</script>
